<%--
  Created by IntelliJ IDEA.
  User: 23745
  Date: 2024/9/10
  Time: 15:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <style>
        .layui-form{
            margin-left: auto;
            margin-right: auto;
        }
        .login-box{
            margin-top: 50%;
            height: 400px;
            width: 400px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css" media="all">
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
</head>
<body>

<div class="layui-container">
    <div class="layui-row" style="height: 100%">
        <div class=" layui-col-md4 layui-col-md-offset4 layui-col-xl4 layui-col-xl-offset4 layui-col-lg4 layui-col-lg-offset4 login-box"  >
            <form class="layui-form" method="post" action="http://localhost:8080/login">
                <div class="layui-form-item ">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" lay-submit lay-filter="login" class="layui-btn" >登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
<script>

    layui.use(['form', 'jquery'], function(){
        var form = layui.form;
        var $ = layui.jquery;
        console.log("jquery",$)
        var errorMessage = "${errorMessage}"
        if (errorMessage){
            layer.msg('登录失败：' + errorMessage);
        }
        // 登录监听
        form.on('submit(login)', function(data){
            // 阻止表单默认提交
            // 收集数据
            var username = data.field.username;
            var password = data.field.password;
            console.log(form)
            // form.submit("login");

            // 发送 AJAX 请求
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/login',
                contentType: 'application/json',
                data: JSON.stringify({username: username, password: password}),
                success: function(res) {
                    if(res.code === 200) {
                        // 登录成功
                        layer.msg('登录成功');
                        // 重定向到其他页面
                        window.location.href = 'http://localhost:8080/index.jsp';
                    } else {
                        // 登录失败
                        layer.msg('登录失败：' + res.message);
                    }
                },
                error: function() {
                    layer.msg('登录请求失败，请稍后再试');
                }
            });
        });
    });
</script>

</body>
</html>
